<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>回到顶部</title>
   <link rel="stylesheet" href="../css/bootstrap4.5.min.css">
   <script src="../js/jquery-3.5.1.min.js"></script>
   <style>
      .com_parts_1 {
         position: fixed;
         right: 20px;
         top: 800px;
      }

      @media (max-width:768px) {
         .com_parts_1 {
            top: 600px;
            right: 10px;
         }
      }
   </style>
</head>

<body>
   <div class="com_parts_1">
      <img src="../images/totop.png" alt="">
   </div>

   <script>
      $(function () {
         $(".com_parts_1").hide(); //先将回到顶部按钮隐藏
         $(function () {
            $(window).scroll(function () {
               if ($(window).scrollTop() > 50) {
                  $(".com_parts_1").fadeIn(200); // 当滚动条距离顶部大于50px时,显示回到顶部按钮
               } else {
                  $(".com_parts_1").fadeOut(200); // 滚动条距离顶部小于50px,隐藏回到顶部按钮
               }
            });
            $(".com_parts_1").click(function () {
               $("html,body").animate({
                  scrollTop: 0
               }, 1000); //500毫秒完成回到顶部动画
            });
         });
      });
   </script>
</body>

</html>